<template>
  <div class="area pad">
    <div class="head">
      <span>地区管理</span>
    </div>
    <el-table :data="areaList" stripe border v-loading="showloading" class="m-t-b">
      <el-table-column label="地区名称" prop="cname"></el-table-column>
      <el-table-column label="地区类型">
        <template slot-scope="scope">
          {{scope.row.ctype | typeFilter}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button circle icon="el-icon-delete" type="danger" @click="handleDeleteArea(scope.row)" disabled></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="m-t-b flex"
      :page-size="pageSize"
      layout="prev, pager, next"
      :current-page="curPage"
      @current-change="handlePagi"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
import {
  addArea,
  updateArea,
  deleteAreaById,
  getAreaByPage
} from '../api/hospitalAPI';

export default {
  name: 'Area',
  data () {
    return {
      area: {
        parentId: '',
        cname: '',
        ctype: '' // 0: 国家 1: 市 2: 省 3: 区
      },
      areaList: [],
      curPage: 0,
      pageSize: 10,
      showloading: false,
      total: 0
    }
  },
  methods: {
    fetchAreaByPage (index) { // 分页查询地区
      this.showloading = true;
      getAreaByPage({
        count: this.pageSize,
        index
      })
      .then(res => {
        if (res.data.code === 1) {
          let list = res.data.data.list || [];
          this.total = res.data.data.totalRecord;
          this.areaList = list
        } else {
          this.$message.error(res.data.msg || '服务异常!')
        };
        this.showloading = false
      })
      .catch(e => {
        this.showloading = false;
        this.$message.error('服务异常!')
      })
    },
    handlePagi (page) { // 分页事件
      this.curPage = page;
      this.fetchAreaByPage(page)
    },
    handleDeleteArea (data) {
      this.$confirm(`确定删除地区 ${data.cname} 吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(res => {
        deleteAreaById(data.id)
        .then(res => {
          if (res.data.code === 1) {
            this.$message({
              type: 'success',
              message: '操作成功'
            });
            this.fetchAreaByPage(this.curPage)
          } else {
            this.$message.error(res.data.msg || '服务异常!')
          }
        })
        .catch(e => {
          this.$message.error('服务异常!')
        })
      })
      .catch(e => {
        this.$message({
          type: 'info',
          message: '取消操作'
        })
      })
    }
  },
  filters: {
    typeFilter (type) {
      let res = '';
      switch (type) {
        case '0':
          res = '国家';
          break
        case '1':
          res = '省';
          break
        case '2':
          res = '市';
          break
        case '3':
          res = '区';
          break
        default:
          break
      };
      return res
    }
  },
  created () {
    this.fetchAreaByPage(1)
  }
}
</script>
<style lang="scss">
  .area {
    .cell {
      text-align: center;
    }
  }
</style>
